<template>
  <div class='body_list_item' 
    ref='body_list_item'
    @mouseenter="onHover" 
    @mouseleave="onLeave" 
    @click="handlerClickUser" >
    <!-- 这个是一个list中的一个item组件 -->
    <div class="del_btn" @click.stop="handlerDelBtn">
      <div >
        <i class="el-icon-close" :style='delbtn_style'></i>
      </div>
    </div>
    <div class='avatar'>
      <el-avatar :src="item_data.portrait"> user </el-avatar>
    </div>
    <div class='name_box'>
      <div>
        <span>{{item_data.nickName}}</span>
      </div>
      <div style="margin-top: 5px">
        <span>{{item_data.newContent}}</span>
      </div>
    </div>
    <div class="unread_num">
      <el-badge class="mark" :value="item_data.unreadNum"  v-if="item_data.unreadNum != 0"/>
    </div>

    
  </div>
</template>

<script>
export default {
  components: {
      
    
  },
  activated() {
    
  },
  props: {
    item_data: Object,
    clickedItemDialId: Number,
  },
  watch: {
    clickedItemDialId:{
      handler: function(newValue){
        if(newValue === this.item_data.dialId){
          this.onHoverColor();
        }else{
          this.onLeaveColor();
        }
      }
    }
  },
  data() {
    return {
        // delbtn_show: false,
        delbtn_style: 'visibility:hidden',
        // delbtn_style: '',
    }
  },
  methods: {
    /**
     * 当 当前item 被点击，触发事件向 父组件 提供 被点击item 的信息
     */
    handlerClickUser( event ){
        console.log("我被点击了", event, this.item_data);
        // 向 父组件 提醒 被点击事件
        var {dialId, uid,  nickName, portrait} = this.item_data
        this.$emit('clickItem', {dialId, uid, nickName, portrait})
    },
    /**
     * 移动到当前位置 才显示删除按钮，即控制删除按钮的显隐
     */
    onHover(){
      this.delbtn_style = ''
      this.onHoverColor();
    },
    onLeave(){
      this.delbtn_style = 'visibility:hidden'
      if(this.clickedItemDialId !== this.item_data.dialId){
        this.onLeaveColor();
      }
    },
    onHoverColor(){
      this.$refs.body_list_item.style.background = '#ccc'
    },
    onLeaveColor(){
      this.$refs.body_list_item.style.background = '#eee'
    },
    handlerDelBtn(){
      console.log("deleteBtn被点击", this.item_data.nickName, this.item_data.dialId);
      // 将事件发送给父组件
      this.$emit("deleteRelation", this.item_data.dialId);
    },


  },
}
</script>

<style>
/** 整个对话框 */
.body_list_item{
 width: 240px;
 height: 76px;
 padding: 18px 24px;
 display: flex;
 cursor: pointer;

 background:#eee;

 /* border-style: solid; */
 
}
.del_btn{
  /* background: rgb(255, 112, 112); */
  margin-left: -20px;
}
.del_btn > div{
  margin-top: 13px;
}
.avatar{
  /* background: #0f0; */
  margin-left: 5px;
}
.name_box{
  /* background: rgb(108, 233, 255); */
  width: 140px;
  margin-left: 5px;

}
.unread_num{
  /* background: #f0f; */

}
.unread_num > div{
  margin-top: 17px;
}
</style>